<script setup lang="ts">
import { getFilmParai } from "@/api/zhang";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

import { ref } from "vue";

const film = ref(''); // 定义 film 数组
const video = ref<any[]>([]); // 定义 video 数组
const currentVideoIndex = ref(0); // 当前显示的视频下标

// 获取视频数据
getFilmParai(route.query.movieId).then((res) => {
  film.value = res.data.movie;
  video.value = res.data.feedVideos.feeds;
//   console.log(video.value);
});
</script>

<template>
  <div class="all">
    <!-- 当前显示的视频 -->
    <div class="video-container">
      <video :src="video[currentVideoIndex]?.video?.url"  autoplay  controls></video>
    </div>

    <div class="a-all">
        <p>《{{ film?.nm }}》全部视频</p>
        <span>共{{ video?.length }}个视频</span>
    </div>

    <!-- 按钮切换视频 -->
    <div class="button-container">
      <div
        class="a"
        v-for="(item, index) in video"
        :key="index"
        @click="currentVideoIndex = index"
      >
       <img :src="item?.video?.imgUrl" alt="">
        <p :class="{ active: currentVideoIndex === index }">{{ item?.title }}</p>
      </div>
    </div>

    <footer>
      <p>影视行业信息 <span>《免责声明》</span> I 违法和不良信息举报电话：123456789</p>
      <img
        src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/bottom-logo.png"
        alt=""
      />
    </footer>
  </div>
</template>

<style lang="less" scoped>
footer {
  width: 100%;
  height: 100rem;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  // margin-bottom: 60rem;

  p {
    font-size: 10rem;

    span {
      color: #4e759e;
    }
  }

  img {
    width: 78rem;
    height: 22rem;
  }
}
.a-all {
  width: 95%;
  margin: 0 auto;
  height: 40rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 13rem;
    color: #666;
    margin-top: 10rem;
    line-height: 60rem;
  }
}

.a {
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 20rem;
  
  img{
    width: 35%;
  }
  p {
    text-align: left;
    font-size: 13rem;
    padding-left: 10rem;
    line-height: 20rem;
  }

  /* 添加 active 样式 */
  p.active {
    color: red; /* 点击后的文字变成红色 */
  }
}
.video-container {
  width: 100%;
  height: 220rem; /* 设定固定高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000; /* 可选：设置背景色以防加载时空白 */
}

video {
  width: 100%;
  display: block;
  margin: 0 auto;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
}

.button-container {
  margin-top: 20rem;
  text-align: center;
}

p {
  margin: 0;
  padding: 0;
}
</style>
